<template>
  <div class="simple-dashboard">
    <h1>天威线材制造有限公司 - 换位生产车间可视化系统</h1>

    <div class="dashboard-grid">
      <div class="dashboard-card">
        <h2>设备状态</h2>
        <div class="status-summary">
          <div class="status-item">
            <div class="status-label">总设备数</div>
            <div class="status-value">10</div>
          </div>
          <div class="status-item">
            <div class="status-label">在线设备</div>
            <div class="status-value online">8</div>
          </div>
          <div class="status-item">
            <div class="status-label">离线设备</div>
            <div class="status-value offline">1</div>
          </div>
          <div class="status-item">
            <div class="status-label">故障设备</div>
            <div class="status-value error">1</div>
          </div>
        </div>
      </div>

      <div class="dashboard-card">
        <h2>今日生产</h2>
        <div class="production-summary">
          <div class="production-value">12,500 米</div>
          <div class="production-label">当前生产速度</div>
          <div class="production-speed">15.5 米/分钟</div>
        </div>
      </div>

      <div class="dashboard-card wide">
        <h2>生产趋势</h2>
        <div class="chart-container">
          <ECharts :options="chartOptions" height="250px" />
        </div>
      </div>
    </div>

    <div class="dashboard-card">
      <h2>设备状态</h2>
      <table class="device-table">
        <thead>
          <tr>
            <th>设备名称</th>
            <th>设备类型</th>
            <th>位置</th>
            <th>状态</th>
            <th>生产速度</th>
            <th>生产长度</th>
            <th>最后更新时间</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>换位机A1</td>
            <td>CTC换位机</td>
            <td>A区1号</td>
            <td><span class="status online">在线</span></td>
            <td>15.5 米/分钟</td>
            <td>1,250 米</td>
            <td>2025-04-17 15:30:00</td>
          </tr>
          <tr>
            <td>换位机A2</td>
            <td>CTC换位机</td>
            <td>A区2号</td>
            <td><span class="status online">在线</span></td>
            <td>14.8 米/分钟</td>
            <td>1,180 米</td>
            <td>2025-04-17 15:30:00</td>
          </tr>
          <tr>
            <td>换位机B1</td>
            <td>CTC换位机</td>
            <td>B区1号</td>
            <td><span class="status offline">离线</span></td>
            <td>0 米/分钟</td>
            <td>950 米</td>
            <td>2025-04-17 14:45:00</td>
          </tr>
          <tr>
            <td>换位机B2</td>
            <td>CTC换位机</td>
            <td>B区2号</td>
            <td><span class="status error">故障</span></td>
            <td>2.3 米/分钟</td>
            <td>820 米</td>
            <td>2025-04-17 15:30:00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ECharts from '../components/ECharts.vue'

// 图表配置
const chartOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['生产速度', '生产长度']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
  },
  yAxis: [
    {
      type: 'value',
      name: '速度(米/分钟)',
      position: 'left',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#409EFF'
        }
      },
      axisLabel: {
        formatter: '{value} 米/分钟'
      }
    },
    {
      type: 'value',
      name: '长度(米)',
      position: 'right',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#67C23A'
        }
      },
      axisLabel: {
        formatter: '{value} 米'
      }
    }
  ],
  series: [
    {
      name: '生产速度',
      type: 'line',
      yAxisIndex: 0,
      data: [12, 15, 17, 16, 14, 15, 16],
      smooth: true,
      lineStyle: {
        width: 3,
        color: '#409EFF'
      },
      itemStyle: {
        color: '#409EFF'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(64, 158, 255, 0.7)'
            },
            {
              offset: 1,
              color: 'rgba(64, 158, 255, 0)'
            }
          ]
        }
      }
    },
    {
      name: '生产长度',
      type: 'bar',
      yAxisIndex: 1,
      data: [820, 932, 901, 934, 1290, 1330, 1450],
      barWidth: 10,
      itemStyle: {
        color: '#67C23A'
      }
    }
  ]
})

// 生命周期钩子
onMounted(() => {
  console.log('SimpleDashboard 组件已挂载')
})
</script>

<style scoped>
.simple-dashboard {
  padding: 20px;
  background-color: #0f1c3c;
  color: #fff;
  height: 100%;
  overflow-y: auto;
}

h1 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  background: linear-gradient(to right, #1890ff, #52c41a);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(24, 144, 255, 0.5);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-card {
  background-color: rgba(19, 35, 64, 0.8);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dashboard-card.wide {
  grid-column: span 3;
}

h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.status-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.status-item {
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.05);
}

.status-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
}

.status-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.status-value.online {
  color: #67C23A;
}

.status-value.offline {
  color: #909399;
}

.status-value.error {
  color: #F56C6C;
}

.production-summary {
  text-align: center;
}

.production-value {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 15px;
}

.production-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
}

.production-speed {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.chart-container {
  height: 250px;
}

.device-table {
  width: 100%;
  border-collapse: collapse;
}

.device-table th,
.device-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.device-table th {
  background-color: rgba(0, 21, 41, 0.5);
  font-weight: bold;
}

.device-table tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.status.online {
  background-color: rgba(103, 194, 58, 0.2);
  color: #67C23A;
}

.status.offline {
  background-color: rgba(144, 147, 153, 0.2);
  color: #909399;
}

.status.error {
  background-color: rgba(245, 108, 108, 0.2);
  color: #F56C6C;
}
</style>
